<template>
	<div class="common_table" id="common_table">
		<ul class="false_table">
			<li class="table_title">
				<div class="spe_title">
					<div><input type="checkbox" />委托时间</div>
				</div>
				<div>
					<div>类型</div>
				</div>
				<div>
					<div>委托量</div>
				</div>
				<div>
					<div>止盈触发价</div>
				</div>
				<div>
					<div>止盈委托价</div>
				</div>
				<div>
					<div>止损触发价</div>
				</div>
				<div>
					<div>止损委托价</div>
				</div>
				<div>
					<div>剩余委托量</div>
				</div>
				<div>
					<div>交易状态</div>
				</div>
				<div>
					<div>操作</div>
				</div>
			</li>
			<li>
				<div class="spe_title"><input type="checkbox" />2016/12/12 12:12:12</div>
				<div>止盈止损委托</div>
				<div>7456.67</div>
				<div>0.4355</div>
				<div>0.4355</div>
				<div>7.2776</div>
				<div>0.4355</div>
				<div>0.4355</div>
				<div>已成交</div>
				<div>--</div>
			</li>
			<li>
				<div class="spe_title"><input type="checkbox" />2016/12/12 12:12:12</div>
				<div>止盈止损委托</div>
				<div>7456.67</div>
				<div>0.4355</div>
				<div>0.4355</div>
				<div>7.2776</div>
				<div>0.4355</div>
				<div>0.4355</div>
				<div>已成交</div>
				<div>--</div>
			</li>
		</ul>
		<div class="table_foot">
			<button>撤销勾选</button>
			<div class="page">
				<ol>
					<li>
						<</li>
							<li>1</li>
							<li>2</li>
							<li class="current">3</li>
							<li>···</li>
							<li>10</li>
							<li>></li>
				</ol>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
	};
</script>

<style lang="scss">
	.common_table {
		.false_table {
			width: 960px;
			text-align: center;
			font-size: 12px;
			border-collapse: collapse;
			/*display:none;*/
			li {
				width: 960px;
				height: 60px;
				border: #fff solid 2px;
				div {
					float: left;
					width: 85px;
					height: 60px;
					line-height: 60px;
					margin: 0 2px;
					input {
						margin-right: 10px;
						vertical-align: middle;
					}
				}
				.spe_title {
					width: 150px;
				}
			}
			li:first-child {
				width: 960px;
				height: 60px;
				div {
					float: left;
					width: 85px;
					height: 60px;
					line-height: 60px;
					border: 0;
					margin: 0 2px;
					div {
						border-bottom: #007AFF solid 2px;
						input {
							margin-right: 10px;
							vertical-align: middle;
						}
					}
				}
				.spe_title {
					width: 150px;
					div {
						width: 150px;
					}
				}
			}
			li:hover {
				border: #007AFF solid 2px;
			}
			.table_title:hover {
				border: #fff solid 2px;
			}
		}
		.table_foot {
			width: 960px;
			height: 50px;
			margin-top: 10px;
			button {
				width: 130px;
				height: 50px;
				border-radius: 2px;
				border: none;
				float: left;
			}
			.page {
				width: 170px;
				height: 10px;
				float: right;
				ol {
					width: 170px;
					height: 20px;
					li {
						width: 20px;
						height: 20px;
						float: left;
						line-height: 20px;
						text-align: center;
						margin-right: 5px;
					}
					li.current {
						background: #007AFF;
						color: #fff;
						border-radius: 2px;
					}
					li:last-child {
						margin: 0;
					}
				}
			}
		}
	}
</style>